<template>
	<view class="p-t-50">
	  <homewalletBar />
      <view :style="`border-radius:40rpx;width:calc(100% - 140rpx);background-image:url(${require('../../static/img3/mywallet.png')});`" 
	  class="h126 m-auto p-l-20 p-r-20 p-t-20 p-b-20 rel bg-cover">
          <view class="view flex-row align-center justify-between m-b-10">
            <view class="view flex-row align-center ">
              <view class="c-fff fz-14 m-r-8">总资产</view>
              <view class="w18 h10"></view>
            </view>

            <view class="view flex-row align-center ">
              <view class="c-fff fz-14 m-r-8">{{defaultWallet.address | $hiddenString(6,6)}}</view>
              <image @click="copyText(defaultWallet.address)" src="/static/img1/front page_icon_QR code_default.png" class="w25 h25"/>
            </view>
          </view>
          <!--<view class="fz-22 c-fff">
            ¥1000.00
          </view>-->
          <view class="view flex-row align-center justify-between bott-bar">
            <view class="flex-1 view align-center justify-center" @click="goto('/pages/wallet/transfer/totransfer')">
              <image src="/static/img1/icon_transfer_default.png" class="w25 h25 m-b-10"/>
              <view class="fz-12 c-fff">转账</view>
            </view>

            <view class="flex-1 view align-center justify-center" @click="goto('/pages/wallet/transfer/scantransfer')">
              <image src="/static/img1/icon_Collection_default.png" class="w25 h25 m-b-10"/>
              <view  class="fz-12 c-fff">收款</view>
            </view>
          </view>

      </view>

      <view class="view flex-row align-center justify-between m-r-4 m-b-24 p-l-20 p-r-20 m-t-24">
        <view class="view flex-row align-center">
          <view @click="changeList(0)" class="m-r-23 c-798 fz-16 bold m-r-23" :class="(tabList == 0) ? 'list-hover':''">资产列表</view>
          <view @click="changeList(1)" class="c-798 fz-16 bold" :class="(tabList == 1) ? 'list-hover':''">NFT列表</view>
        </view>
		<view @click="reFlash">
			<image src="/static/flash.png" class="w30 h30"/>
		</view>
        <!-- 增加合约地址将于 4月开放<image src="/static/img1/front page_icon_Add assets_default.png" class="w30 h30"/>-->
      </view>
      
      <view class="auto-h" scroll-y="true" style="overflow-y: auto;">
		  <block v-if="tabList == 0">
			  <view  class="m-l-17 m-r-17 p-b-14 b-b-1-c p-t-15 p-b-15" v-for="(item,index) in balanceList" :key="index">
				<view @click="toTransferRecord(item.name)" class="balanceList view flex-row align-center justify-between">
				<view class="view flex-row align-center">
					<view class="w48 h48 m-r-10" :style="`border-radius:50%;background-size: cover;
						background-image:url(${require('../../static/token'+ item.logoUrl)})
					`"></view>
					<view>
					<view style="color:#07144F;" class="fz-16 m-b-5">{{item.name}}</view>
					</view>
				</view>

				<view>
					<view class="m-b-5 c-101 fz-16">{{item.amount}}</view>
					<!--<view class="c-608 fz-12">¥ 534,226,452</view>-->
				</view>
				</view>
          	  </view>
		  </block>
		  
		  <block v-else-if="tabList == 1">
			  <view  class="m-l-17 m-r-17 p-b-14 b-b-1-c p-t-15 p-b-15" v-for="(item2,index2) in nftList" :key="index2" @click="showDrawer">
				<view class="balanceList view flex-row align-center justify-between">
				<view class="view flex-row align-center">
					<image :src="item2.image" class="w96 h96 m-r-10" style="border-radius:15px;"/>		
					<view style="color:#07144F;" class="fz-16 m-b-5">{{item2.nft_name}}</view>
				</view>
				<view>
					<view class="m-b-5 c-101 fz-16">{{item2.hold_number}}</view>
				</view>
				</view>
		  	</view>
		  </block>
      </view>	  	

	  <uni-drawer ref="showRight" mode="right" :width="drawerW" class="maskShowIn">
	      <select-page @selectCommit="updateSelectNums" ref="selectPage"/>
	  </uni-drawer>

	  <uni-popup ref="transferNFTPopup" type="center"  :mask-click="false">
		  	<view  class="popupCenter" style="overflow:hidden;">
				<view class="center_title">转账NFT</view>
				<view class="">
					<view class="center_content tips success">目前为优惠期，转NFT由神龙补贴Gas。优惠期结束时不会另行通知</view>
				</view>
				<view class="center_content">您正在准备转出下列NFT，转账步骤不可取消，请认真核对地址</view>
				<view class="center_content">
					<view class="view flex-row align-center flex-wrap" v-if="selectNFT.length>0">
						<view v-for="(item,index) in selectNFT" :key="index" class="m-r-5 c-122 fz-10">{{ item.nft_name }} * {{ item.numVal }};</view>
					</view>
					<view class="tips error" style="margin-top: 0;" v-else>
						您没有选择任何NFT
					</view>
				</view>

				<view class="center_content">
					<uni-easyinput  v-model="receive_address" :placeholder="'请输入接收人地址'"></uni-easyinput>
				</view>

				<view class="center_content">
					<uni-easyinput type="password" v-model="password" :placeholder="'请输入密码'"></uni-easyinput>
				</view>
				<view class="center_button">
					<view class="btn1" @click="closeNFTPopup">取消</view>
					<view class="btn2" @click="transferNFT" >确认</view>
				</view>
		  	</view>
		</uni-popup>

	</view>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import homewalletBar from '@/components/homewalletBar/index'
import walletApi from "@/common/walletApi.js"
import copy from "@/common/tools.js"
import uniDrawer from '@/components/uni-drawer/uni-drawer'
import selectPage from './nftSelect.vue'
import  uniEasyinput from '@/components/uni-easyinput/uni-easyinput'

import {community,getTokenList} from "@/apis/bsc20.js"
import {registerNFTAddress} from "@/apis/pool.js"
import { aboutWallet } from "@/common/businessCommon";
import { getnftList } from "@/apis/pool.js"
import { transferOutNft } from "@/apis/transfer.js"


import _ from "lodash";
import { checkUpdate } from "@/components/yzhua006-update/js/app-update-check.js";
import uniIcons from '@/components/uni-icons/uni-icons'
	export default {
		components: {
			uniIcons,
			homewalletBar,
			selectPage,
			uniDrawer,
			uniEasyinput
		},
		data() {
			return {
				userInfo: {},
				barHeight: 0,
				list: [
				  {},
				  {},
				  {}
				],
				drawerW: '',
				receive_address: '',
				password: '',
				tabList: 0, //0 资产列表，1 nft列表
				// showList:[],
				selectNFT: [],
				balanceList:[],
				nftList:[],
			}
    },
	
    onLoad() {
		//this.defaultWallet.address = '0x77eb6f18d22434b3cee87781ff115bf64a1eec06';
        let _self = this;
		this.init()
		this.changeList(0)
		// 自动检查更新代码，kids决定暂时不植入
		// this.getAppInfo(0);
        //_self.getSystemStatusBarHeight();
		//let web3 = walletApi.web3Init();
	},
	mounted() {
		
	},
    async onShow() {
		//没创建钱包
		if( Object.keys(this.defaultWallet).length == 0 ) {
			this.goto("/pages/wallet/interview/index")
		}
		uni.showLoading({})
		this.getUserInfo();
		uni.hideLoading();
    },
	computed: {
		...mapState(['defaultWallet']),
	},
	methods: {
      ...mapMutations(['changeLogin']),
	  updateSelectNums(arr) {
		//   this.closeDrawer()
		  this.selectNFT = arr
		  this.$refs.transferNFTPopup.open()
	  },
	  // 转账NFT
	  async transferNFT () {
		  if (!this.password) {
			  return this.app.tips('请输入密码!')
		  }
		  const ret = await aboutWallet.checkPassword(this.defaultWallet.address,this.password)
		  console.log('check pass',ret)
		  if (!ret) {
		      this.password = ''
		      uni.showToast({
		          title: '密码错误,请重新输入',
		          icon:'none'
		      })
			  return
		  }
		  uni.showLoading()
		  let nft_info = this.selectNFT.map( item => {
                item.nft_id = item.id
                item.number = item.numVal
                return item
            })
		  const res = await transferOutNft({
			  nft_info: JSON.stringify(nft_info),
			  receive_address: this.receive_address
		  })
		  this.password = ''
		  await this.getNft();
		  uni.hideLoading()
		  if (res.code == 0) {
			  this.app.tips(res.message)
			  this.closeNFTPopup()
			  this.$refs.selectPage.reload()
		  }
	  },
	  async reFlash(){
		uni.showLoading()
		if(this.tabList == 1){
			await this.getNft();
		} else {
		  	await this.getList();
		}
		uni.hideLoading();
	  },
	  closeNFTPopup() {
		  this.$refs.transferNFTPopup.close()
	  },
	  // 跳转收款
      getSystemStatusBarHeight:function(){
          let _self = this
          // #ifdef APP-PLUS
          let height = plus.navigator.getStatusbarHeight();
          
          _self.barHeight = height;
          // #endif
          // #ifdef H5
          _self.barHeight = 0;
          // #endif
      },
	  init(){
		const { windowWidth, windowHeight } = uni.getSystemInfoSync();
		this.drawerW = windowWidth * .9 
	  },
	  
	  async getList() {
		  //await community();
		  let res = await getTokenList(this.defaultWallet.address);
		  this.balanceList = res.data;
		  //任何地址都需要登记一下
		  await registerNFTAddress();
		//   let web3 = walletApi.web3Init();
		  /*let amount = await web3.eth.getBalance(this.defaultWallet.address);
		  this.balanceList.push({
		  				  decimal: 18,
		  				  id: 1,
		  				  logoUrl: "/BNB.png",
		  				  name: "BNB",
		  				  price: 1,
		  				  symbol: "BNB",
		  				  tokenAddress: "none",
		  				  amount: aboutWallet.toRegularNumber(amount)
		  });*/
		  /*let amount = await web3.eth.getBalance(this.defaultWallet.address);
		  this.balanceList = [{
		  				  decimal: 18,
		  				  id: 1,
		  				  logoUrl: "/BNB.png",
		  				  name: "BNB",
		  				  price: 1,
		  				  symbol: "BNB",
		  				  tokenAddress: "none",
		  				  amount: aboutWallet.toRegularNumber(amount)
						  }]
		  console.log('list',this.balanceList);*/
	  },
	  async getNft() {
		  let res = await getnftList();
		  const { data } = res
		  this.nftList = data.map( item => {
		  	item.isActive = false 
		  	item.numVal = 1
		  	item.hold_number = Number(item.hold_number)
		  	return item
		  })
		  this.nftList = data;
	  },
	  showDrawer() {
		  this.$refs.showRight.open();
	  },
	  closeDrawer() {
	      this.$refs.showRight.close();
	  },
	  getAppInfo(type) {
		const system_info = uni.getSystemInfoSync();
		let params = {
			os: system_info.platform, //本机设备操作系统  （android || ios）
		};
		if (params.os != "ios" && params.os != "android") false; //如果不是安卓或ios 返回false

		//这里自行请求API获取版本信息 建议传入操作系统标识，返回本机对应的操作系统最新版本信息，也就是安卓的返回就是安卓的版本信息  ios返回就是ios的版本信息

		//请求获取最新版本
		setTimeout(() => {
			let update_info = {
			version: "1.0.2", //线上版本
			now_url:
				"https://aa.apk", //更新链接
			silent: 0, //是否是静默更新
			force: 1, //是否是强制更新
			net_check: 1, //非WIfi是否提示
			note: "产品汪汪要改这个字的颜色", //更新内容
			};
			checkUpdate(update_info, type).then((res) => {
			if (res.msg) {
				plus.nativeUI.toast(res.msg);
			}
			}); ///检查更新
			//checkUpdate 这个方法会做什么？：线上版本号 与 本地版本号做对比 ，如果需要更新  根据静默，强制、wifi等信息执行静默更新或跳转到升级页面
			//跳转升级页面的前提是，需要新建并在pages.json中配置升级页面，配置方法请查看插件详情
		}, 200);
		},
      logot() {
        this.changeLogin(false)
        this.app.setUserInfo('')
        this.app.goLogin()
		// this.app.post({
		//   url: 'index.php/api/index/updateUserOrderStatusData',
		//   data: {
		//    status: 2
		//   }
		// }, (res) => {
		//   // this.changeWsLock(false)
		//   this.app.goLogin()
		// })
        
      },
	  copyText(word){
		  uni.setClipboardData({
		      data: word,
		      success: function () {
		        uni.showToast({
		          title: '复制地址成功!',
		          icon: 'none'
		        })
		      }
		  });
	  },
      getUserInfo() {
        const userInfo = this.app.getUserInfo()
        this.userInfo = userInfo
      },
		goto(url) {
			console.log('goto',url);
            uni.navigateTo({
              url: url
            });
        },
		toTransferRecord(value){
			uni.navigateTo({
				url: '/pages/home/transferRecord?symbol='+value
			});
		},
		notOpen(){
			this.$showToast('该功能将于3月13日晚开放');
		},
		async changeList(id){
			this.tabList = id;
			uni.showLoading()
			if(id == 1){
				await this.getNft();
			} else {
				await this.getList();
			}
			uni.hideLoading()
			// this.showList = this.balanceList
		}
	}
}
</script>

<style lang="scss" scoped>
page {
    background-color:#f6f6f6;
    overflow-y: auto;		
}
  .bott-bar {
    position: absolute;
    bottom: 80rpx;
    width: 100%;
    left: 0;
	z-index: 30;
  }
  /* #ifdef H5 */ uni-page-head { display: none; } /* #endif */
.bgs {
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
 }
 .list-hover{
	 border-bottom: 3px solid #979797;
 }
 .inp {border-radius: 20px;overflow: hidden;}
 .bor-68 {border: 1px solid #68F0FF;}
 .circle {border-radius: 50%;}
 .b-r-50 {border-radius: 20px;}
 .b-b-1-c {border-bottom: 1px solid #D1D4E8;}
 

::v-deep .maskShowIn {
    .uni-drawer__content {
        background: #F6F6F6;
    }
    
}
 .popupCenter,.popupsCenter,.popupCenters{
 		position: fixed;
 		top: 34%;
 		left:10%;
 		right:50%;
 		width: 600rpx;
 		margin: 0 auto;
 		// height: 360rpx;
 		border-radius: 20rpx;
 		color: #333;
 		background: #ffffff;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		.center_title{
 			width: 100%;
 			text-align: center;
 			margin: 20rpx auto;
 			font-size: 36rpx;
 			color: #333333;
 			font-weight:700;
 		}
 		.center_content{
 			width: 80%;
 			text-align: center;
 			margin: 20rpx auto;
 			margin-bottom: 34rpx;
 			// font-size: 38rpx;
 		}
 		.center_button{
 			width: 98%;
 			height: 100rpx;
 			margin: 0 auto;
 			margin-top: 10rpx;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			background: #ffffff;
 			// border-top: #dddddd;
 			button{
 				background: #ffffff;
 
 				width: 48%;
 				font-size: 34rpx;
 				// border:#FFFFFF solid 1rpx;
 			}
 			.btn1{
 				height: 90rpx;
 				text-align: center;
 				line-height: 90rpx;
 				background: #ffffff;
 				width: 100%;
 				border-top:#ddd solid 1rpx;
 				// border-right:#ddd solid 1rpx;
 				border-bottom-left-radius: 20rpx;
 			}
 			.btn2{
 				overflow: hidden;
 				height: 90rpx;
 				text-align: center;
 				line-height: 90rpx;
 				background: #ffffff;
 				width: 100%;
 				border-top:#ddd solid 1rpx;
 				border-left:#ddd solid 1rpx;
 				border-bottom-right-radius: 20rpx;
 				color: #634DFF;
 			}
 		}
 
 	}
 	.popupsCenter{
 		width: 600rpx;
 		// height: 690rpx;
 		top: 20%;
 		left:10%;
 		right:50%;
 		.center_title{
 			width: 100%;
 			text-align: center;
 			margin: 0 auto;
 			margin-top: 30rpx;
 			margin-bottom: 14rpx;
 			font-size: 38rpx;
 			color: #333333;
 		}
 		.center_text{
 			width: 100%;
 			// height: 70%;
 			margin: 60rpx auto;
 			display: flex;
 			flex-direction: column;
 			justify-content: flex-start;
 			align-items: center;
 			input{
 				width: 80%;
 				margin: 0 auto;
 				font-size: 30rpx;
 				color: #AAAAAA;
 				height: 70rpx;
 				border-bottom: 2rpx solid #ddd;
 				margin-bottom: 30rpx;
 			}
 			.uni-easyinput{
 				width: 90%;
 			}
 			.text-right{
 				text-align: right;
 				width: 80%;
 				font-size: 26rpx;
 				color: #5D5FFC;
 				margin-top: -24rpx;
 			}
 		}
 		.tips{
 			width: 80%;
 			color: #848484;
 		}
 		.input-frame{
 			display: flex;
 			justify-content: space-between;
 			padding-bottom: 20rpx;
 			border-bottom: 2rpx solid #aaa;
 			.input-input{
 				flex: 1;
 				font-size: 30rpx;
 				padding-right: 14rpx;
 			}
 			.input-btn{
 				font-size: 30rpx;
 				color: #5D5FFC;
 			}
 		}
 	}
</style>
